<template>
    <div class="app-container">
        <el-form ref="form" :model="form" label-width="120px">
            <span>友情提示：发送邮件</span>
         
            <el-form-item label="主题">
                <el-input v-model="form.subject"></el-input>
            </el-form-item>
            <el-form-item label="收件人">
                <el-input v-model="form.receiver"></el-input>
            </el-form-item>
            <el-form-item label="邮件内容">
                <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item label="附件路径">
                <el-input v-model="form.filePath"></el-input>
            </el-form-item>
            <el-form-item label="模板key">
                <el-input v-model="form.id"></el-input>
            </el-form-item>
            <el-form-item label="模板参数值">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="邮件内容">
            <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :file-list="fileList">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="sendSimpleMail">发送普通邮件</el-button>
                <el-button  @click="sendAttachmentsMail">发送附件邮件</el-button>
                <el-button  @click="sendTemplateMail">发送模板邮件</el-button>
            </el-form-item>
            
        </el-form>
        
    </div>
</template>
<script>
import { sendSimpleMail, sendAttachmentsMail, sendTemplateMail } from '@/api/ehcache'
export default {
    data(){
        return {
            fileList: [],
            form:{
                subject:'mail subject',
                receiver:'kangjichang2009@163.com',
                desc:'main content',
                filePath: 'D:\\favicon.png',
                id: '1',
                name: '2'
            }
        }
    },
    methods: {
        sendSimpleMail() {
            const param = {
                'body': {
                  "mailDTO":{
                    "to":this.form.receiver,
                    "subject": this.form.subject,
                    "content": this.form.desc,
                    "filePath":"D:\\favicon.png",
                    "id":"1",
                    "name":"222"
                 }
                }
            }
            sendSimpleMail(param).then(response => {
                if(response.code == '000000'){
                     this.$message('发送成功 ！')
                }
               
            })
            
        },
        sendAttachmentsMail() {
            const param = {
                'body': {
                  "mailDTO":{
                    "to":this.form.receiver,
                    "subject": this.form.subject,
                    "content": this.form.desc,
                    "filePath":"D:\\favicon.png",
                    "id":"1",
                    "name":"222"
                 }
                }
            }
            sendAttachmentsMail(param).then(response => {
                if(response.code == '000000'){
                     this.$message('发送成功 ！')
                }
            })
           
        },
        sendTemplateMail() {
            const param = {
                'body': {
                  "mailDTO":{
                    "to":this.form.receiver,
                    "subject": this.form.subject,
                    "content": this.form.desc,
                    "filePath":"D:\\favicon.png",
                    "id":this.form.id,
                    "name":this.form.name
                 }
                }
            }
            sendTemplateMail(param).then(response => {
                if(response.code == '000000'){
                     this.$message('发送成功 ！')
                }
            })
           
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
        }
    }
}
</script>

<style>
.line{
  text-align: center;
}
</style>

